<template>
  <template v-if="data">
    <div
      class="progress-status no-scrollbar"
      :style="{
        'overflow-x': tipVisible ? 'visible' : 'auto',
        '--line-width': progressLineWidth,
        '--line-offset-left': progressLineOffsetLeft,
      }"
      ref="progressBarRef"
    >
      <div class="point-tip-mask" v-if="tipVisible"></div>
      <div
        class="progress-item"
        :class="index == progressActiveIndex ? 'show-logo active-dot' : ''"
        v-for="(item, index) in data"
        :key="item.id"
      >
        <div
          class="progress-item-inner"
          @click="onClickProgressItem(item, index)"
        >
          <div class="user-logo">
            <div
              class="nickname"
              :title="
                memberStore.profile?.last_name + ' '+ memberStore.profile?.first_name
              "
            >
              {{ memberStore.profile?.last_name +' '+ memberStore.profile?.first_name }}
            </div>
            <img
              class="logo"
              v-logo-error
              :src="memberStore.profile?.headimgurl"
              alt=""
              v-if="memberStore.profile?.headimgurl"
            />
            <img
              class="logo"
              src="~/assets/images/user-logo/default_logo.jpg"
              alt=""
              v-else
            />
          </div>
          <div class="relative" style="width: 100%">
            <div class="dot"></div>
            <template
              v-if="
                data.length > 1 &&
                ((index == 1 && tipVisible) ||
                  (data.length - 1 == index && tipVisible))
              "
            >
              <IconPointTip class="svg cursor-svg" />
              <div
                class="point-tip-dialog"
                :class="index == 1 ? 'point-start-tip' : ''"
                :id="data.length - 1 == index ? 'point-tip-end' : ''"
                @click.stop=""
              >
                <span
                  class="wave"
                  v-for="i in 4"
                  :key="i"
                  :style="`--i: ${i}`"
                ></span>
                <a-button
                  class="click"
                  type="primary"
                  @click="onClickContinue"
                  >{{
                    isContinued
                      ? $t("btnText.complete")
                      : $t("btnText.click_continue")
                  }}</a-button
                >
              </div>
            </template>
          </div>
          <div class="progress-title" :title="item.title">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="pc-skeleton flex-1">
      <Skeleton height="100px" block></Skeleton>
    </div>
    <div class="mobile-skeleton flex-1">
      <Skeleton height="300px" block></Skeleton>
    </div>
  </template>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, ref, watch } from "vue";
import { useMemberStore } from "../../../../../store";
import { onMounted } from "vue";
import type { CourseTrainingItem } from "../../../../../types/aviation";

type Props = {
  data: CourseTrainingItem[] | undefined;
};

const props = defineProps<Props>();
const emits = defineEmits(["click-progress-step"]);

const memberStore = useMemberStore();

// 点击进度项事件

const progressActiveIndex = ref(0);

const onClickProgressItem = (item, index) => {
  if (progressActiveIndex.value == index) return;
  // 派发事件携带参数传递给父组件
  emits("click-progress-step", { item, index });
  progressActiveIndex.value = index;
  let progressItems = (progressBarRef.value as HTMLElement).querySelectorAll(
    ".progress-item"
  );
  progressItems.forEach((item) => {
    item.classList.remove("active");
  });
  progressItems.forEach((item, i) => {
    if (i < index) {
      nextTick(() => {
        item.classList.add("active");
      });
    }
  });
};

// 设置进度调样式
const progressBarRef = ref<HTMLElement | undefined>();
const progressLineWidth = ref("");
const progressLineOffsetLeft = ref("");
const initProgressLineWidth = () => {
  function init() {
    let progressBar = progressBarRef.value as HTMLElement;
    let progressItems = progressBar.querySelectorAll(".progress-item");
    if (progressItems.length <= 1) return;
    let lineWidth: number = 0;
    progressItems.forEach((item: HTMLElement, index, rawArr) => {
      if (index == 1) {
        let prevItemOffsetLeft = (rawArr[index - 1] as HTMLElement).offsetLeft;
        let currentOffsetLeft = item.offsetLeft;
        let { offsetLeft: dotOffsetLeft, offsetWidth: dotOffsetWidth } =
          item.querySelector(".dot");
        lineWidth =
          currentOffsetLeft -
          prevItemOffsetLeft +
          dotOffsetLeft +
          dotOffsetWidth / 2;
        progressLineOffsetLeft.value = item.offsetWidth / 2 + "px";
      }
    });
    progressLineWidth.value = lineWidth + "px";
  }

  nextTick(() => {
    init();
  });
};

// 点击继续按钮
const tipVisible = ref();
const isContinued = ref(false);
tipVisible.value = memberStore.getTipVisible();
// tipVisible.value = true;
let needResizePosition = tipVisible.value;
const onClickContinue = () => {
  if (isMobile()) {
    tipVisible.value = false;
    return;
  }
  if (!isContinued.value) {
    isContinued.value = true;
    setTipDialogPosition();
  } else {
    // end
    document.body.style.overflow = "";
    tipVisible.value = false;
  }
};
// 设置显示提示操作
const transition_time = 1;
// flag 判断是否是 windows resize 事件
const setTipDialogPosition = (flag = false) => {
  if (!isContinued.value) return;
  let startTipDom = document.querySelector(".point-start-tip") as HTMLElement;
  if (!startTipDom) return;
  if (startTipDom?.style.transform.includes("vw")) return;
  let startCursorSvg = startTipDom.parentNode?.querySelector(
    ".cursor-svg"
  ) as HTMLElement;

  if (flag) {
    startTipDom.style.transition = `none`;
    startCursorSvg.style.transition = `none`;
    return;
  }
  let endTipDom = document.querySelector("#point-tip-end") as HTMLElement;
  let endCursorSvg = endTipDom.parentNode?.querySelector(
    ".cursor-svg"
  ) as HTMLElement;
  const { left } = endTipDom?.getBoundingClientRect();
  let offsetLeft = left - startTipDom.getBoundingClientRect().left;
  let cursorOffsetLeft =
    endCursorSvg.getBoundingClientRect().left! -
    startCursorSvg?.getBoundingClientRect()?.left!;
  startTipDom.style.transition = `transform ${transition_time}s ease-in-out`;
  startCursorSvg.style.transition = `left ${transition_time}s ease-in-out`;
  startTipDom.style.transform = `translate(calc(-50% + ${offsetLeft}px), -50%)`;
  startCursorSvg.style.left = `calc(50% + 0.7813vw + ${cursorOffsetLeft}px)`;
};
const resetTipDialogPosition = () => {
  setTipDialogPosition(true);
};

watch(
  () => props.data,
  () => {
    initProgressLineWidth();
  }
);

onMounted(() => {
  if (needResizePosition) {
    window.addEventListener("resize", resetTipDialogPosition);
  }
  initProgressLineWidth();
  window.addEventListener("resize", initProgressLineWidth);
});

onBeforeUnmount(() => {
  if (!tipVisible.value) {
    memberStore.setTipVisibleEndTime();
  }
  window.removeEventListener("resize", resetTipDialogPosition);
  window.removeEventListener("resize", initProgressLineWidth);
});
</script>
<style scoped lang="less">
.progress-status {
  display: flex;
  justify-content: space-between;
  // margin-left: -100px;
  // margin-right: -100px;
  .point-tip-mask + .progress-item {
    justify-content: flex-start;
    &::after {
      left: var(--line-offset-left);
      width: calc(var(--line-width) - var(--line-offset-left));
    }
  }
  .progress-item {
    display: flex;
    justify-content: center;
    position: relative;
    max-height: 150px;
    // flex: 1;
    &::after {
      content: "";
      position: absolute;
      width: calc(var(--line-width) - var(--line-offset-left));
      height: 2px;
      left: 50%;
      background-color: #ccd6de;
      top: 87px;
    }
    .progress-item-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      &:hover {
        cursor: pointer;
        .progress-title {
          color: #3d88f2;
        }
        .dot {
          background-color: #3d88f2;
          &::before {
            position: absolute;
            background-color: rgba(61, 136, 242, 0.2);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }
      }
    }
    &:first-of-type {
      justify-content: flex-start;
      &::after {
        left: var(--line-offset-left);
      }
    }
    &:last-of-type {
      justify-content: flex-end;
      &::after {
        display: none !important;
      }
    }
    &.active-dot {
      .dot {
        background-color: #3d88f2;
        &::before {
          position: absolute;
          background-color: rgba(61, 136, 242, 0.2);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }
      }
      .progress-title {
        color: #3d88f2;
      }
    }
    &.active {
      &::after {
        background-color: #3d88f2;
        z-index: 1;
      }
      .dot {
        background-color: #3d88f2;
        &::before {
          position: absolute;
          background-color: rgba(61, 136, 242, 0.2);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }
      }
      .progress-title {
        color: #3d88f2;
      }
      & + .progress-item {
        .dot {
          background-color: #3d88f2;
          &::before {
            position: absolute;
            background-color: rgba(61, 136, 242, 0.2);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }
        .progress-title {
          color: #3d88f2;
        }
      }
    }
    &.show-logo {
      .user-logo {
        display: flex;
        visibility: visible;
      }
    }
    .user-logo {
      visibility: hidden;
      flex-direction: column;
      align-items: center;
      .nickname {
        color: #9daab2;
        font-size: 12px;
        margin-bottom: 4px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .logo {
        width: 48px;
        height: 48px;
      }
    }
    .dot {
      margin: 14px auto;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #70818c;
      position: relative;
      z-index: 1;
      &::before {
        content: "";
      }
    }
    .progress-title {
      color: #36434d;
      font-size: 14px;
      width: 100px;
      text-align: center;
    }
  }
}
.point-tip-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.05);
}
.progress-item {
  &.active-dot + div {
    .dot + .svg,
    .point-tip-dialog {
      visibility: visible;
    }
  }
  .dot + .svg {
    position: absolute;
    top: 50%;
    visibility: hidden;
    left: calc(50% + 15px);
    transform: rotate(-25deg) translate(-50%, -50%);
    width: 40px;
    height: 40px;
    z-index: 1;
    transition: left 0.5s ease-in-out;
    :deep(&) path {
      fill: #4c5a64;
    }
  }
}
.point-tip-dialog {
  // display: none;
  position: absolute;
  transition: transform 0.5s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 220px;
  background-color: rgba(0, 0, 0, 0.1);
  height: 170px;
  border-radius: 20px;
  .click {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 11px !important;
    margin-bottom: 8px;
    margin-right: 8px;
    padding: 0 10px !important;
    height: 32px !important;
  }
  span.wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    // border: 1px solid #70818c;
    background-color: var(--yd-primary-color);
    opacity: 0;
    animation-name: wave_animate;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.5s * var(--i));
  }
  @keyframes animate {
    0% {
      opacity: 0.5;
      height: 0;
      width: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      height: 70px;
      width: 70px;
      opacity: 0;
    }
  }
}
#point-tip-end {
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .progress-item {
    .dot + .svg {
      width: 200px;
      height: 200px;
      left: calc(50% + 70px);
    }
    &::after {
      top: 440px !important;
    }
    .point-tip-dialog {
      width: 1400px;
      height: 900px;
      border-radius: 80px;
      .click {
        height: 180px !important;
        font-size: 64px !important;
        padding: 0 60px !important;
        margin-right: 30px;
        margin-bottom: 30px;
      }
      span.wave {
        width: 100px;
        height: 100px;
      }
      @keyframes animate {
        0% {
          opacity: 0.5;
          height: 0;
          width: 0;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          height: 400px;
          width: 400px;
          opacity: 0;
        }
      }
    }
  }
  // progress-bar
  .progress-status {
    overflow-x: scroll;

    .progress-item {
      max-height: unset;
      &::after {
        height: 10px;
        bottom: 205px;
      }
      .user-logo {
        .nickname {
          font-size: 61px;
          margin-bottom: 20px;
        }
        .logo {
          width: 246px;
          height: 246px;
        }
      }
      .dot {
        margin: 72px auto;
        width: 61px;
        height: 61px;
      }
      .progress-title {
        font-size: 72px;
        height: auto;
        line-height: normal;
        width: 600px;
      }
      &.active-dot {
        .dot {
          &::before {
            width: 123px !important;
            height: 123px !important;
          }
        }
      }
    }
  }
}
</style>
